<template>
  <el-container class="setting_shopping-mall_contract-set">
    <el-main>
      <div class="wrapper-box">
        <div class="dis">
          <div class="fin-setting-content">

            <el-card shadow="never" class="cardInfo">
              <el-form ref="companyEntityCertifyStepTwo" :model="dataForm" class="cardInfo_elform" :rules="companyEntityCertifyStepTwoRules" label-width="2rem">
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="intro-title">
                      <div class="clearfix" style="text-align: center;">
                        <el-steps class="state" :active="active" align-center finish-status="success">
                          <el-step title="主体信息" description="主体信息" />
                          <el-step title="法人信息" description="法人信息" />
                          <el-step title="提交审核" description="提交审核" />
                        </el-steps>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header">
                      <div class="cursor flex_1 dis al_item">

                        <el-form-item label="公司名称:" prop="name" label-width="120px" class="person-center-form-item">
                          <!-- <span class="form-item-title">公司名称：</span> -->
                          <el-input v-model="dataForm.name" :disabled="true" class="form-item-input" placeholder="请输入公司名称" />
                          <span class="form-item-title">(名称须与平台经营主体以及银行认证主体一致)</span>
                        </el-form-item>

                      </div>
                    </div>
                  </div>
                </div>
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header">
                      <div>

                        <el-form-item label-width="120px" label="注册地址:" class="person-center-form-item">
                          <!-- <span class="form-item-title">注册地址：</span> -->
                          <provinceCity :city-arr="cityArr" :disabled="firstType === 2" @getCityArr="CityArr" />
                        </el-form-item>

                      </div>
                    </div>
                    <div class="dis al_item dis_ju_spb item-header">
                      <div class="cursor flex_1 dis al_item">

                        <el-form-item prop="address" label-width="120px" class="person-center-form-item">
                          <el-input v-model="dataForm.address" :disabled="firstType === 2" class="form-item-input" placeholder="请输入注册地址" />
                          <span class="form-item-title">(注册地址须与营业执照住所保持一致)</span>
                        </el-form-item>

                      </div>
                    </div>
                  </div>
                </div>
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header">
                      <div class="cursor flex_1 dis al_item">

                        <el-form-item label-width="120px" prop="creditCode" label="信用证代码:" class="person-center-form-item">
                          <!-- <span class="form-item-title">统一信用证代码：</span> -->
                          <el-input v-model="dataForm.creditCode" :disabled="firstType === 2" class="form-item-input" placeholder="请输入统一信用证代码" />
                          <span class="form-item-title">(输入营业执照上的统一信用证代码)</span>
                        </el-form-item>

                      </div>
                    </div>
                  </div>
                </div>
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header">
                      <div class="cursor flex_1 dis al_item">

                        <el-form-item label-width="120px" prop="businessTermType" label="营业期限:" class="person-center-form-item">
                          <!-- <span class="form-item-title">营业期限：</span> -->
                          <el-radio v-model="dataForm.businessTermType" :disabled="firstType === 2" :label="2">
                            长期有效
                          </el-radio>
                          <el-date-picker
                            v-model="dataForm.businessStart"
                            :disabled="firstType === 2"
                            type="date"
                            placeholder="开始日期"
                            align="right"
                            value-format="yyyy-MM-dd"
                          />
                        </el-form-item>

                      </div>
                    </div>
                    <div class="dis al_item dis_ju_spb item-header">
                      <div class="cursor flex_1 dis al_item">

                        <el-form-item prop="businessTermType" label-width="120px" class="person-center-form-item">
                          <el-radio v-model="dataForm.businessTermType" :label="1">期间</el-radio>
                          <el-date-picker
                            v-model="pickerOptions"
                            :disabled="firstType === 2"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="right"
                            value-format="yyyy-MM-dd"
                          />
                        </el-form-item>

                      </div>
                    </div>
                  </div>
                </div>
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header item-height">
                      <div class="cursor flex_1 dis al_item">
                        <el-form-item prop="businessScope" label="经营范围:" label-width="120px" class="person-center-form-item margintop_label">
                          <!-- <span class="form-item-title">经营范围：</span> -->
                          <el-input v-model="dataForm.businessScope" :disabled="firstType === 2" type="textarea" rows="4" class="form-item-area" placeholder="请输入经营范围" style="padding-top: 10px;" />
                          <span class="form-item-title">(与营业执照上的经营范围一致)</span>
                        </el-form-item>

                      </div>
                    </div>
                  </div>
                </div>
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header item-height">
                      <div class="cursor flex_1 dis al_item">

                        <el-form-item label="营业执照照片：" label-width="120px" class="person-center-form-item ">
                          <!-- <span class="form-item-title">营业执照照片：</span> -->
                          <upload class="load-cont" ref="upload" :limit="1" :disabled="firstType === 2" :file-list="fileList" :max-size="0.5" :file-filter="filterImgType" :name-show="false" @setUrl="getUrl" @setKey="getUrls" />
                          <span class="form-item-title">(清晰可见，有效期内，照片大小低于500K，格式为：png、jpg、jpeg)</span>
                        </el-form-item>

                      </div>
                    </div>
                  </div>
                </div>
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header  item-height">
                      <div class="cursor flex_1 dis al_item">

                        <el-form-item label="真实经营材料：" label-width="120px" class="person-center-form-item">
                          <!-- <span class="form-item-title">营业执照照片：</span> -->
                          <upload
                            ref="upload2"
                            :limit="99"
                            :disabled="firstType === 2"
                            :file-list="fileList2"
                            :file-filter="filterImgType"
                            :max-size="0.5"
                             class="load-cont"
                            :name-show="false"
                            @setUrl="getUrl2"
                            @setKey="getUrls2"
                          />
                          <span class="form-item-title">(清晰可见，有效期内，照片大小低于500K，格式为：png、jpg、jpeg)</span>
                        </el-form-item>

                      </div>
                    </div>
                  </div>
                </div>
              </el-form>
            </el-card>
          </div>
        </div>
      </div>

      <div class="image-link-button">
        <el-button class="image-link-button-button" size="mini" @click="gotoCompanyEntityCertifyStepOne('','')">上一步</el-button>
        <el-button class="image-link-button-button" size="mini" @click="gotoCompanyEntityCertifyStepThree('',firstType)">下一步</el-button>
      </div>

    </el-main>
  </el-container>
</template>

<script>
import provinceCity from '@/components/provinceCity'
import { getTenant } from '@/api/tenement'
import { subjectAuthentication, subjectAuthenticationSee, authenticationModify } from '@/api/authentication'
import upload from '@/components/upload/newUpload'
export default {
  components: {
    provinceCity,
    upload
  },
  props: {
    visable: {
      type: Boolean,
      required: false,
      default: false
    }

  },
  data() {
    return {
      firstType: 1,
      tenantInfo: {},
      companyEntityCertifyStepTwoRules: {
        name: [
          { required: true, message: '请填写公司名称', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请填写注册地址', trigger: 'blur' }
        ],
        creditCode: [{ required: true, message: '请填写信用代码', trigger: 'blur' }],
        businessTermType: [
          { required: true, message: '请选择营业期限', trigger: 'blur' }
        ],
        businessScope: [
          { required: true, message: '请填写经营范围', trigger: 'blur' }
        ]
        // worth: [
        //   { required: true, message: '请填写面值', trigger: 'blur' }
        // ]
      },
      disableds: false,
      // 营业时间
      pickerOptions: [],
      // 图片类型
      filterImgType: ['jpg', 'jpeg', 'png', 'icon', 'gif', 'bmp', 'JPG', 'JPEG', 'PNG', 'ICON', 'GIF', 'BMP'],
      disabled: false,
      // 上传图片
      fileList: [],
      fileList2: [],
      host: '',
      cityArr: [],
      active: 0,
      // 所需要保存的数据
      dataForm: {
        realBusinessMaterialsList: [],
        id: '',
        // 公司名称
        name: '',
        // 信用证代码
        creditCode: '',
        // 注册地址
        address: '',
        // 省份
        province: '',
        // 城市
        city: '',
        // 县区
        county: '',
        // 街道
        streetTown: '',
        // 营业范围
        businessScope: '',
        // 营业执照
        certificate: '',
        // 营业类型 1 期间 2永久
        businessTermType: 1,
        // 营业开始时间
        businessStart: '',
        // 营业结速时间
        businessEnd: ''
      }
    }
  },
  computed: {
    activeRadio: {
      get() {
        return this.value
      },
      set(val) {
      }
    }
  },
  created() {
    this.getTenantInfo()
    this.firstType = this.$route.query.type
      this.getInfo()
  },
  mounted() {
  },
  methods: {
    getTenantInfo() {
      getTenant({}).then(response => {
        this.tenantInfo = response
        this.dataForm.name = response.name
        this.cityArr = [response.province.toString(), response.city.toString(), response.county.toString(), response.streetTown.toString()]
        this.dataForm.province = response.province.toString()
        this.dataForm.city = response.city.toString()
        this.dataForm.county = response.county.toString()
        this.dataForm.streetTown = response.streetTown.toString()
      })
    },
    getInfo() {
      subjectAuthenticationSee().then(res => {
        if (res !== null) {
          this.dataForm = res
          this.cityArr = [res.province, res.city, res.county, res.streetTown]
          this.dataForm.province = res.province
          this.dataForm.city = res.city
          this.dataForm.county = res.county
          this.dataForm.streetTown = res.streetTown
        }else{
            this.$message.error(`读取公司信息出错`)
        }
      })
    },
    CityArr(val) {
      this.cityArr = val
      this.dataForm.province = val[0]
      alert(this.dataForm.province)
      this.dataForm.city = val[1]
      this.dataForm.county = val[2]
      this.dataForm.streetTown = val[3]
    },
    getUrls(arr) {
      const arr1 = []
      arr.forEach(item => {
        arr1.push({
          name: item.zxfUrl,
          path: item.urlName,
          contentType: item.zxfUrl.split('.')[1]
        })
      })
      console.log(arr1, arr, 111)
      console.log('this.fileList2', this.fileList2)
      if (arr.length === 0) {
        this.dataForm.pic = ''
        return
      }
      // this.dataForm.pic = arr1[0].path
      console.log('this.dataForm.pic', this.dataForm.pic)
    },
    getUrls2(arr) {
      const arr1 = []
      arr.forEach(item => {
        arr1.push({
          name: item.zxfUrl,
          path: item.urlName,
          contentType: item.zxfUrl.split('.')[1]
        })
      })
      this.fileList2 = arr1
      console.log(arr1, arr, 111)
      console.log('this.fileList2', this.fileList2)
      if (arr.length === 0) {
        // this.dataForm.pic = ''
        this.fileList2 = []
        return
      }
      // this.dataForm.pic = arr1[0].path
      console.log('this.dataForm.pic', this.dataForm.pic)
    },
    // 获取图片地址
    getUrl(path, name, host) {
      this.dataForm.pic = `${host}/${path}`
      console.log('this.dataForm.pic', this.dataForm.pic)
    },
    getUrl2(path, name, host) {
      this.host = host
      // console.log('this.dataForm.pic',this.dataForm.pic)
    },
    gotoCompanyEntityCertifyStepOne(id, type) {
      this.$router.push(`/companyCertification/companyEntityCertifyStepOne?id=${id}&type=${type}`)
    },
    gotoCompanyEntityCertifyStepThree(id, type) {
      this.$refs.companyEntityCertifyStepTwo.validate(valid => {
        if (valid) {
          if (!this.$refs.upload.key || !this.dataForm.pic) {
            this.$message.error('营业执照必须上传')
            return
          }
          if (!this.$refs.upload2.key || this.fileList2.length === 0) {
            this.$message.error('真实材料不能为空')
            return
          }
          
          if (!this.dataForm.id) {
            if((this.fileList2 !== null) && (this.fileList2.length > 0)){
              this.fileList2.forEach(item => {
                var file_name = this.host + '/' + item.name
                this.dataForm.realBusinessMaterialsList.push(file_name)
              })
            }
            this.dataForm.certificate = this.dataForm.pic
            if (this.dataForm.businessTermType === 1) {
              if (this.pickerOptions.length > 0) {
                this.dataForm.businessStart = this.pickerOptions[0]
                this.dataForm.businessEnd = this.pickerOptions[1]
              } else {
                this.$message.error('营业期限不能为空')
              }
            }
            subjectAuthentication(this.dataForm).then(response => {
              if (response) {
                this.$message.success('保存成功')
                // window.history.back(-1)
                this.$router.push(`/companyCertification/companyEntityCertifyStepThree?id=${id}&type=${type}`)
              } else {
                console.log('response', response)
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .load-cont{
    .el-upload--picture-card{
      width: 300px;
      height: 200px;
      line-height:200px
    }
    .el-upload-list__item{
      width: 300px;
      height: 200px;
    }
  }
  .setting_shopping-mall_contract-set {
    background: #d8d8d8;
    padding: 4px;
    height: 100%;
    border-radius: 3px;
    overflow: auto;
    .item-height{
      height: auto !important;
    }
    .person-center-form-item .form-item-input{
      width: 400px;
    }
    .margintop_label .el-form-item__label {
      margin-top: 10px;
    }
    .clearfix{
      margin-top: 20px;
      padding:5px;
      padding-top: 0;
      height: 15px;
      display: flex;
      align-items: center;
      >div {
        border: 0px solid #e6ebf5;
        flex-grow: 1;
        width:0;
        margin-right: 20px;
      }
    }
    }
    .fin-setting-content {
      width: 100%;
      margin: 0px 0 4px 4px;
      overflow-x: hidden;
      overflow-y: auto;
      border-radius:5px;
      .cardInfo {
          margin-top: 2px;
          padding: 2px;
          .el-card__body{
            // overflow: scroll;
          }
          .cardInfo_elform {
            .al_item {
              margin: 5px;
            }
          }
       }
      .user-center-item {
        box-sizing: border-box;
        cursor: pointer;
        padding-bottom: 10px;
        &.active {
          border: 1px solid #1890ff
        }
      }

    }
    .nav-item {
      font-size: 14px;
      background: #fff;
      border: 0px solid #e3e2e5;
      border-radius: 4px;
      margin-bottom: 2px;
      margin: 0px 80px 0px 80px;
      width: 100%;
      display: inline-block;

      &:nth-child(odd) {
        margin-right: 10px;
        font-size: 14px;
        color: #595961;
      }
      .intro-title {
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
        .state {
          width: 700px;
          font-size: 14px;
          .el-step.is-center .el-step__description {
            padding: 0;
          }
          .el-step__head.is-success {
            border-color: #1890ff;
          }
          .is-success {
            color: #1890ff;
          }
        }
      }
      .item-header {
        border-radius: 4px 4px 0 0;
        // height: 40px;
        line-height: 39px;
        padding: 0 10px 0 5px;
      }

      .item-content {
        padding: 5px 0;
      }
    }
    .person-center-form-item {
      font-size: 14px;
      // height: 40px;
      margin: 0px 80px 0px 80px;
      .el-form-item__label, .el-form-item__content, .el-radio__label, .el-button, .el-checkbox .el-checkbox__label {
        font-size: 14px;
        // color: #172161;
      }
      .el-input-number.is-without-controls.el-input__inner{
        width: 20px;
        height: 14px;
      }
      .el-input.is-without-controls.el-input__inner{
        height: 14px;
      }
      .form-item-input{
        min-height: 18px;
        width: 420px;
        font-size: 12px;
      }
      .form-item-area{
        padding-top: 20px;
        min-height: 18px;
        width: 520px;
        font-size: 12px;
      }
      .form-item-title{
        // width:
        padding-left: 1px;
        padding-right: 1px;
        color: #666;
      }
      .info-setting {
        margin-left: 15px;
        color: #0000FF;
        text-align: right;
        cursor: hand;
      }
      .flex-just{
        vertical-align: middle;
        width: 80px;
      }
    }
    .base-info {
      display: flex;
      .icon-upload {
        margin-right:50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        >label {
          margin-bottom: 10px;
        }
        .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 5px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
          }
        }
      }
      .basics-info {
        margin: 0 auto;
      }
    }
    .el-form-item  {
      margin-bottom: 30px;
    }
    .el-col {
      margin-bottom: 0px;
    }
    .noMargin {
      margin-bottom: 0 !important;
    }
    .wh5-3 {
      li {
        width: 200px;
        height: 160px;
      }
      .el-upload--picture-card {
        width: 200px;
        height: 160px;
        line-height: 160px;
      }
    }
  .bg-white-panel {
    padding: 5px;
    font-size: 14px;
    font-weight: bolder;
    border-radius: 4px;
    margin-bottom: 5px;
    margin-left: 100px;
  }

.image-link-button {
  padding: 2px 0 0;
  margin-top: 14px;
  text-align: center;
  justify-content: space-between;
  .image-link-button-button{
     background-color: #00aaff;
     z-index: 1;
     color: #FFFFFF;
     height: 36px;
     width: 150px;
     border: 1px solid #FFFFFF;
     padding: 0;
     font-size: 12px;
     align-items: center;
     border-radius: 10px;
  }
}

</style>
